import React from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import Play from './play';
import { viewportWidth, navigate } from '@/utils/index';
import { connect } from 'react-redux';

const mapStateToProps = ({ player }) => {
    return {
        playState: player.playState,
    };
};

const connector = connect(mapStateToProps);


function PlayView(props) {
    const { routeName, playState } = props;

    const onPress = () => {
        navigate('Detail');
    }
    if (routeName === 'Root' || routeName === 'Detail' || playState === 'paused') {
        return null;
    }
    return (
        <View style={styles.container}>
            <Play onPress={onPress} />
        </View>
    );
}

const width = 50;

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        width: width,
        height: width + 20,
        bottom: 0,
        left: (viewportWidth - width) / 2,
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        padding: 4,
        borderTopLeftRadius: 25,
        borderTopRightRadius: 25,
        ...Platform.select({
            android: {
                elevation: 4,
            },
            ios: {
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowOpacity: 0.85,
                shadowRadius: 5,
                shadowOffset: {
                    width: StyleSheet.hairlineWidth,
                    height: StyleSheet.hairlineWidth,
                },
            },
        }),
    },
});

export default connector(PlayView);
